import React, { useState, useEffect } from 'react'
import './css/pingjia.scss'
import IconFont from './Tubiao';
import XiePing from './Writeping'
import { useNavigate } from 'react-router-dom';
import { Sticky, Tabs } from 'react-vant';
import axios from './Axios'
export default function Pingjia() {
    const navigate = useNavigate()
    let [list, setList] = useState([
        { title: '111', status: true, price: '3000', img: './1.png', desc: '描述' },
        { title: '222', status: false, price: '3000', img: './1.png', desc: '描述' },
        { title: '333', status: false, price: '3000', img: './1.png', desc: '描述' },
        { title: '444', status: false, price: '3000', img: './1.png', desc: '描述' },
    ])


    // let [list, setList] = useState([])
    // let getlist = async () => {
    //     let { data } = await axios.get('http://localhost:3000/pingjia')
    //     setList(data.list)
    // }
    // useEffect(() => {
    //     getlist()
    // }, [])
    return (
        <div className='div'>
            <Sticky>
                <div className='top'>
                    <span className='icon' onClick={() => (navigate('/app/my'))}>
                        <IconFont name='icon-arrowLeft'></IconFont>
                    </span>
                    <span>我的评价</span>
                </div>
            </Sticky>

            <Tabs sticky swipeable color={'#FF4500'}>
                <Tabs.TabPane title={`待评价(${list.filter(ele => ele.status == false).length})`}>
                    {list.filter(ele => ele.status == false).map((ele, index) => {
                        return <XiePing key={index} ele={ele} />
                    })}
                </Tabs.TabPane>



                <Tabs.TabPane title={`已评价(${list.filter(ele => ele.status == true).length})`}>
                    {list.filter(ele => ele.status == true).map((ele, index) => {
                        return <XiePing key={index} ele={ele} />
                    })}
                </Tabs.TabPane>
            </Tabs>

        </div>
    )
}
